import React from 'react';
import TweenOne from 'rc-tween-one';
import { Menu } from 'antd';
import { getChildrenToRender } from './utils';

const { Item, SubMenu } = Menu;

class Header3 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: undefined,
    };
  }

  phoneClick = () => {
    const phoneOpen = !this.state.phoneOpen;
    this.setState({
      phoneOpen,
    });
  };

  render() {
    const { dataSource, isMobile, ...props } = this.props;
    const { phoneOpen } = this.state;
    const navData = dataSource.Menu.children;
    const navItems = navData.map((item) => {
      const { children: a, subItem, ...itemProps } = item;
      if (subItem) {
        const subItems = subItem.map(($item, ii) => {
          const { children: childItem, ...subItemProps } = $item;
          const child = childItem.href ? (
            <a {...childItem}>
              {childItem.children.map(getChildrenToRender)}
            </a>
          ) : (
            <div {...childItem}>
              {childItem.children.map(getChildrenToRender)}
            </div>
          );
          return {
            key: $item.name || ii.toString(),
            ...subItemProps,
            label: child
          };
        });
        
        const label = (
          <div
            {...a}
            className={`header3-item-block ${a.className}`.trim()}
          >
            {a.children.map(getChildrenToRender)}
          </div>
        );
        
        return {
          key: item.name,
          ...itemProps,
          label: label,
          children: subItems,
          popupClassName: "header3-item-child"
        };
      }
      
      const label = (
        <a {...a} className={`header3-item-block ${a.className}`.trim()}>
          {a.children.map(getChildrenToRender)}
        </a>
      );
      
      return {
        key: item.name,
        ...itemProps,
        label: label
      };
    });
    const moment = phoneOpen === undefined ? 300 : null;
    return (
      <TweenOne
        component="header"
        animation={{ opacity: 0, type: 'from' }}
        {...dataSource.wrapper}
        {...props}
      >
        <div
          {...dataSource.page}
          className={`${dataSource.page.className}${phoneOpen ? ' open' : ''}`}
        >
          <TweenOne
            animation={{ x: -30, type: 'from', ease: 'easeOutQuad' }}
            {...dataSource.logo}
          >
            <img width="100%" src={dataSource.logo.children} alt="img" />
          </TweenOne>
          {isMobile && (
            <div
              {...dataSource.mobileMenu}
              onClick={() => {
                this.phoneClick();
              }}
            >
              <em />
              <em />
              <em />
            </div>
          )}
          <TweenOne
            {...dataSource.Menu}
            animation={
              isMobile
                ? {
                    x: 0,
                    height: 0,
                    duration: 300,
                    onComplete: (e) => {
                      if (this.state.phoneOpen) {
                        e.target.style.height = 'auto';
                      }
                    },
                    ease: 'easeInOutQuad',
                  }
                : null
            }
            moment={moment}
            reverse={!!phoneOpen}
          >
            <Menu
              mode={isMobile ? 'inline' : 'horizontal'}
              defaultSelectedKeys={['sub0']}
              theme="light"
              items={navItems}
            />
          </TweenOne>
        </div>
      </TweenOne>
    );
  }
}

export default Header3;
